<template>
<div>
  <div id="imgDiv" @mouseover="over" @mouseout="auto"><img :src="img" :width="width"></div>
  <button @click="pre">上一张</button>
  <button @click="next">下一张</button>
  <button @click="auto">自动</button>
</div>
</template>

<script>
import t1 from "../assets/1.png";
import t2 from "../assets/2.png";
import t3 from "../assets/3.png";
import t4 from "../assets/4.png";
import t5 from "../assets/5.png";
import t6 from "../assets/6.png";
import t7 from "../assets/7.png";
import {auto} from "html-webpack-plugin/lib/chunksorter";
var timer;
export default {
  name: "LunBo",
  data(){
    return{
      width:350,
      img:t1,
      images:[t1,t2,t3,t4,t5,t6,t7],
      index:0
    }
  },
  methods:{
    next(){
      this.index++;
      //判断如果当前图片下标是否已经到达最后一个
      if(this.index>=this.images.length){
        //如果是 设置当前图片下标为 第一张图片
        this.index=0;
      }
      //设置图片值
      this.img=this.images[this.index];
    },
    pre(){
      this.index--;
      if (this.index<0){
        this.index=this.images.length-1;
      }
      this.img=this.images[this.index];
    },
    auto(){
      timer=setInterval(this.next,1000)
    },
    over(){
      clearInterval(timer);
    }
  },
  mounted() {
    this.auto();
  }
}
</script>

<style scoped>
#imgDiv{
  height: 500px;
}
</style>
